<script setup lang="ts">
// 导入Vue的reactive函数，用于创建响应式对象
import { reactive } from 'vue';

// 使用reactive创建一个响应式的用户对象
// 包含name和age两个属性，类型会被TypeScript自动推断
const user = reactive({
    name: 'zhangsan',  // 用户名
    age: 12            // 年龄
});
</script>

<template>
    <!--
      默认插槽（未指定name的slot）
      向插槽传递静态数据message="Hello 默认插槽"
      父组件使用时可以通过<template v-slot>或简写#来接收
    -->
    <slot message="Hello 默认插槽"></slot>
    <hr> <!-- 水平分隔线，用于视觉区分不同插槽 -->

    <!--
      具名插槽：指定name为"header"
      向插槽传递静态数据message="Hello Vue.js"
      父组件使用时需要通过<template v-slot:header>或简写#header来接收
    -->
    <slot message="Hello Vue.js" name="header"></slot>
    <hr> <!-- 水平分隔线 -->

    <!--
      具名插槽：指定name为"content"
      向插槽传递响应式数据:user="user"（使用v-bind简写:）
      父组件可以接收并使用这个响应式的user对象
    -->
    <slot :user="user" name="content"></slot>
</template>

<style scoped>
/*
  scoped属性确保样式仅作用于当前组件
  目前该组件不需要额外样式，故样式块为空
*/
</style>